<template>

	<view>

		<!--弹出层代码 -->
		<view>
			<!-- 弹出层 -->
			<uni-popup ref="popup" :animation="false">
				<view class="popup-content" style="margin-top:-20px;background-color: white;border-radius: 5px;">
					<view class="popup-date">
						<view class="pop-child-content">
							<image :src="image" style="width: 260px;height: 260px;" />
						</view>
						<!-- 弹出框结束 -->
					</view>
					<!-- 操作按钮 -->
					<view class="button-bottom">
						<view class="popup-btn" style="text-align: end; margin-top: 20px;">

							<button @click="dialogClose" style="display: inline-block; font-size: 14px; margin-right: 10px;">返回</button>

						</view>
						<view class="popup-btn popup-btn2">

						</view>
					</view>
				</view>
			</uni-popup>
		</view>




		<view class="uni-flex uni-row bg-white">
			<view class="flex-left ">
				<view class="text " style="width: 100rpx;height: 100%; ">
					<view class="uni-flex uni-column" style="height: 100%;">
						<view v-if="user.name" class="flex-item " style="width: auto;">{{user.name}}</view>
						<view  v-if="user.account" class="flex-item " style="width: auto;">{{user.account}}</view>
					</view>
				</view>
			</view>
			<view class="flex-right">

				<view class="uni-flex uni-row" style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 10px;  -webkit-flex-wrap: wrap;flex-wrap: wrap;">
					<view class="flex-item"
						style="width:100%; height: 30px;line-height: 30px;margin-right: 10px;flex-wrap: wrap;">
						<view style="display: inline-block;width: 50%;float: left; margin-top: 6px;"
							v-for="item in user.userRole">
							<!-- <uni-tag :circle="true" :text="item.rolE_NAME" type="warning" /> -->
							<a> <img :src="getImgUrl(item.rolE_SID)" alt="" width="22" style="vertical-align: middle;"> {{ "&nbsp;&nbsp;" + item.rolE_NAME }}</a>
						</view>
					</view>
				</view>

			</view>
		</view>

		<navigator url="/pages/cupboard/mount" open-type="navigate" style="margin-top: 20px;">
			<view class="uni-flex uni-row bg-white item">
				<view class="flex-item imageIcon">
					<image class="image" src="/static/type1.png" />
				</view>
				<view class="flex-item ">
					我的设置
				</view>
				<view class="flex-item imageIcon alignRigth">
					<image class="image" src="/static/arrow-right.png" />
				</view>
			</view>
		</navigator>

		<view class="uni-flex uni-row bg-white item" @click="toggle()"
			style="border-top: 1px solid #BEBEBE;">
			<view class="flex-item imageIcon">
				<image class="image" src="/static/type4.png" />
			</view>
			<view class="flex-item ">身份二维码</view>
			<view class="flex-item imageIcon alignRigth">
				<image class="image" src="/static/arrow-right.png" />
			</view>
		</view>

		<navigator url="/pages/cupboard/message" open-type="navigate">
			<view class="uni-flex uni-row bg-white item"
				style=" border-top: 1px solid #BEBEBE;">

				<view class="flex-item imageIcon">
					<image class="image" src="/static/type3.png" />
				</view>
				<view class="flex-item ">
					我的消息
				</view>
				<view class="flex-item imageIcon alignRigth">
					<image class="image" src="/static/arrow-right.png" />
				</view>

			</view>
		</navigator>

		<navigator url="/pages/cupboard/password" open-type="navigate">
			<view class="uni-flex uni-row bg-white item"
				style="border-top: 1px solid #BEBEBE;">
				<view class="flex-item imageIcon">
				<image src="/static/type2.png" class="image" />
				</view>
				<view class="flex-item ">
					修改密码
				</view>
				<view class="flex-item imageIcon alignRigth">
					<image class="image" src="/static/arrow-right.png" />
				</view>
			</view>
		</navigator>


		<view class="uni-flex uni-row bg-white item"
			style="border-top: 1px solid #BEBEBE;"
			@click="Quit">
			<view class="flex-item imageIcon">
				<image class="image" src="/static/quit.png" />
			</view>
			<view class="flex-item ">
				退出
			</view>
			<view class="flex-item imageIcon alignRigth">
				<image class="image" src="/static/arrow-right.png" />
			</view>
		</view>



	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import QR from "@/common/wxqrcode.js" // 二维码生成器
	export default {
		name: "baclog-now",
		components: {
			uniPopup
		},
		data() {
			return {
				user: [],
				image: '',
				userEntity: this.StorageCache('user')
			}

		},
		onLoad() {

			this.checkLogin()

			this.Init()
		},
		methods: {
			Init() {

				this.user = [];
				uni.request({
					url: this.url+'AppGetUserRole',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						userId: this.userEntity.sid,

					},
					success: (res) => {

						if (res.statusCode == 200) {
							this.user = res.data
						}
					},
					complete: (res) => {
				
					}
				});


			},
			// 打开基础内容
			toggle() {
				let code=JSON.stringify({
					user:this.user.qR_CODE
				});
				let img = QR.createQrCodeImg(code, {
					size: parseInt(400) //二维码大小
				})
				this.image = img
				this.$refs.popup.open()
			},
			// 对话框取消按钮
			dialogClose() {

				this.$refs.popup.close()
			},
			Quit() {
				uni.removeStorageSync('user')
				location.reload()
			},
			getImgUrl (img) {
				return "/static/role"+ img +".png"
			}


		}
	}
</script>

<style>
	.item {
		height: 50px; 
		line-height: 50px;
		position: relative;
	}
	.imageIcon {
		padding: 0 10px;
	}
	.image {
		margin-top: 16px;
		width: 16px;
		height: 16px;
	}
	.alignRigth {
		position: absolute;
		right: 5px;
		top: 1px;
	}

	.tag-view {
		margin: 5px;

	}

	.flex-left {
		width: 40%;
		height: 200rpx;
		text-align: center;
		line-height: 130rpx;

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}

	.flex-right {
		width: 60%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}


	.flex-item {
		height: 30%;
		text-align: center;

	}

	.bg-white {
		background-color: #FFFFFF;
	}
</style>
